<template>
	<view class="content_box">
		<u-navbar
			:is-back="true"
			title="座驾"
			:title-bold="true"
			:border-bottom="false"
			title-color="#000"
			back-icon-name="arrow-left">
			<view class="mr30 f28" slot="right" style="color: #333333;" @click="addCar">
				保存
			</view>
		</u-navbar>
		
		<view class="introduce-center ">
			<view class="box h300 r10">
				<u-input :clearable="false" placeholder="输入您的座驾信息..." maxlength="10" v-model="userInfo.car" type="textarea" :border="false" />
			</view>
			<view class="flex justify-between align-center mt28">
				<view class="">
					
				</view>
				<view class="f24" style="color: #666666;">
					{{num}}/10
				</view>
			</view>
		</view>
		
		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 0,
			value: '',
			userInfo: {},
		};
	},
	onShow() {},
	onLoad(e) {
		this.getUserInfo()
	},
	watch: {
		value(newValue, oldValue) {
			this.num = newValue.length
		}
	},
	methods: {
		async addCar() {
			const res = await this.$u.put('api/user/modifyUser', {
				car: this.userInfo.car,
			})
			if (res.code == 200) {
				this.getUserInfo()
				this.l.msgg(res.msg)
				this.l.to('/pages/me/setUser/setUser')
			}
		},
		
		async getUserInfo() {
			const res = await this.$u.get('api/user/queryUser')
			this.userInfo = res.data
		},
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	
	.introduce-center {
		padding: 30rpx;
		
		.box {
			font-size: 28rpx;
			padding: 30rpx;
			background-color: #F7F5F7;
		}
	}
}
</style>
